<template>
	<div class="content">
		<div class="add">
			<Button type="primary" class="fr" @click="add">添加</Button>
		</div>
		<Table stripe :columns="columns1" :data="list"></Table>

		<Modal v-model="modal1" title="修改账号" width='40%' @on-ok="editConfirm">
			<Form :label-width="100" :model="editForm" :rules="rules" ref="editUserForm">
				<FormItem label="用户账号" prop="usernumber">
					<Input disabled class="w-50" v-model="editForm.usernumber" placeholder="请输入账号" />
				</FormItem>
				<FormItem label="用户姓名" prop="username">
					<Input class="w-50" v-model="editForm.username" placeholder="请输入用户姓名" />
				</FormItem>
				<FormItem label="用户密码" prop="password">
					<Input class="w-50" type="password" v-model="editForm.password" placeholder="请输入用户密码" />
				</FormItem>
				<FormItem label="手机号码" prop="mobile">
					<Input class="w-50" v-model="editForm.mobile" placeholder="请输入手机号码" />
				</FormItem>
			</Form>
		</Modal>

		<Modal v-model="modal2" title="添加账号" width='40%' @on-ok="addConfirm">
			<Form :label-width="100" :model="addForm" :rules="rules1" ref="addUserForm">
				<FormItem label="用户账号" prop="usernumber">
					<Input class="w-50" v-model="addForm.usernumber" placeholder="请输入账号" />
					<div class="tishi">*账号添加不允许修改</div>
				</FormItem>
				<FormItem label="用户姓名" prop="username">
					<Input class="w-50" v-model="addForm.username" placeholder="请输入用户姓名" />
				</FormItem>
				<FormItem label="用户密码" prop="password">
					<Input type="password" class="w-50" v-model="addForm.password" placeholder="请输入用户密码" />
				</FormItem>
				<FormItem label="手机号码" prop="mobile">
					<Input class="w-50" v-model="addForm.mobile" placeholder="请输入手机号码" />
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				list: [], // 所有账号数据
				jslist: [], // 角色数据
				yyid: '',
				rules: {
					usernumber: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[34578]\d{9}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '请输入用户密码',
						trigger: 'blur'
					}]
				},
				rules1: {
					usernumber: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					username: [{
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[34578]\d{9}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					],
					password: [{
						required: true,
						message: '请输入用户密码',
						trigger: 'blur'
					}]
				},
				modal1: false,
				modal2: false,
				editForm: {
					usernumber: '',
					username: '',
					mobile: '',
					password: ''
					// quanxian: []
				},
				addForm: {
					usernumber: '',
					username: '',
					mobile: '',
					password: ''
					// quanxian: []
				},
				columns1: [{
						title: '用户账号',
						key: 'accountName'
					},
					{
						title: '用户姓名',
						key: 'adminName'
					},
					{
						title: '手机号码',
						key: 'phone',
						render: (h, params) => {
							return h('div', params.row.phone == null ? '#' : params.row.phone)
						}
					},
					{
						title: '添加时间',
						key: 'createTime',
						sortable: true
					},
					{
						title: '操作',
						key: 'action',
						width: 200,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h(
									'Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												this.edit(this.list[params.index].id)
											}
										}
									},
									'修改'
								),
								h(
									'Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												this.remove(this.list[params.index].id)
											}
										}
									},
									'删除'
								)
							])
						}
					}
				]
			}
		},
		methods: {
			// 修改
			edit(id) {
				this.modal1 = true
				// this.getJuese()
				this.yyid = id
				let token = localStorage.getItem('mytoken')
				this.axios
					.get('account/platform/operatedAccount/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						//  console.log(res)
						if(res.data.code == 8008) {
							this.editForm.usernumber = res.data.data.adminDto.accountName
							this.editForm.username = res.data.data.adminDto.adminName
							// this.editForm.password = res.data.data.adminDto.passWord
							// this.editForm.quanxian = res.data.data.adminDto.roleId
							this.editForm.mobile = res.data.data.adminDto.phone
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// // 修改账号的确认回调
			editConfirm() {
				let token = localStorage.getItem('mytoken')
				let params = this.qs.stringify({
					id: this.yyid,
					accountName: this.editForm.usernumber,
					adminName: this.editForm.username,
					password: this.editForm.password,
					phone: this.editForm.mobile
					// roleIdList: this.editForm.quanxian
				})
				// console.log(params);
				this.axios
					.put('account/platform/update', params, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// // 添加
			add() {
				this.modal2 = true
				// this.getJuese()
			},
			// 添加账号的确认回调
			addConfirm() {
				this.$refs.addUserForm.validate(valid => {
					if(valid) {
						let token = localStorage.getItem('mytoken')
						let params = this.qs.stringify({
							accountName: this.addForm.usernumber,
							adminName: this.addForm.username,
							password: this.addForm.password,
							phone: this.addForm.mobile
							// roleIdList: this.addForm.quanxian
						})
						// console.log(this.addForm.quanxian)
						// console.log(params)
						this.axios
							.post('account/platform/addAdminAccount', params, {
								headers: {
									Authorization: 'bearer ' + token
								}
							})
							.then(res => {
								if(res.data.code == 8008) {
									this.$Message.info(res.data.message)
									this.getList()
									this.addForm.usernumber = null
									this.addForm.username = null
									this.addForm.password = null
									this.addForm.mobile = null
									// this.addForm.quanxian = []
								} else if(res.data.code == 4004) {
									this.$Message.info(res.data.message)
								} else if(res.data.code == 5501) {
									this.$Message.info(res.data.message)
									localStorage.removeItem('mytoken')
									this.$router.push({
										name: 'login'
									})
								}
							})
					}
				})
			},
			// 删除
			remove(id) {
				let token = localStorage.getItem('mytoken')
				this.axios
					.delete('account/platform/delete/' + id, {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						// console.log(res)
						if(res.data.code == 8008) {
							this.$Message.info(res.data.message)
							this.getList()
						} else if(res.data.code == 4004) {
							this.$Message.info(res.data.message)
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			},
			// 获取所有账号信息
			getList() {
				let token = localStorage.getItem('mytoken')
				this.axios
					.get('account/platform/allAdminAccount', {
						headers: {
							Authorization: 'bearer ' + token
						}
					})
					.then(res => {
						if(res.data.code == 8008) {
							// console.log(res)
							this.list = res.data.data.adminList
						} else if(res.data.code == 5501) {
							this.$Message.info(res.data.message)
							localStorage.removeItem('mytoken')
							this.$router.push({
								name: 'login'
							})
						}
					})
			}
			// 获取所有角色信息
			// getJuese () {
			//   let token = localStorage.getItem('mytoken')
			//   this.axios
			//     .get('account/platform/allRoles', {
			//       headers: {
			//         Authorization: 'bearer ' + token
			//       }
			//     })
			//     .then(res => {
			//       if (res.data.code == 8008) {
			//         // console.log(res);
			//         this.jslist = res.data.data.roleList
			//       } else if (res.data.code == 5501) {
			//         this.$Message.info(res.data.message)
			//         localStorage.removeItem('mytoken')
			//         this.$router.push({name: 'login'})
			//       }
			//     })
			// }
		},
		created() {
			this.getList()
		}
		//  mounted() {
		//    this.$Message.config({
		//     top: 250
		// });
		// }
	}
</script>
<style lang="less">
	.ivu-modal-header {
		padding: 10px 16px;
		background-color: #f8f8f8;
		line-height: 1;
	}
	
	.tishi {
		color: red;
		margin-left: 10px;
		display: inline-block;
	}
</style>